{% block login %}

    <div class="modal hide" id="dwLoginForm">
        <!--<div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h2>&nbsp;</h2>
        </div>-->
        <div class="modal-body" data-piwik-mask>
            <button type="button" class="close" data-dismiss="modal">×</button>
            <div class="row login-signup">
                <div class="span{% if noSignup %}4{% else %}3{% endif %} row-login">

                    <h3>{% trans "login / login / headline" %}</h3>

                    <p>{% trans "login / login / intro" %}</p>

                    <form action="/" method=="POST" class="login-form form-vertical">
                        <div>
                            <div class="control-group"><input class="login-email input-xxlarge span3" autocomplete="username" type="email" value="" placeholder="{% trans "email" %}" /></div>
                            <div class="control-group"><input class="login-pwd input-xxlarge span3" autocomplete="current-password" type="password" value="" placeholder="{% trans "password" %}" /></div>
                        </div>
                        <div>
                            <input type="submit" class="btn btn-login btn-primary" value="Login" /
>                            <label class="checkbox" for="keep-login" style="margin-top: 10px;">
                                <input id="keep-login" class="keep-login" type="checkbox" checked="checked"> {% trans "Remember login?" %}
                            </label>
                        </div>
                    </form>

                    <div class="row">
                        <div class="span2" style="padding-bottom:10px">
                            <a style="display:none" class="btn btn-send-pw btn-info">
                                {% trans "Send new password" %}
                            </a>
                        </div>
                        <div class="span2">
                            <a id="forgot-password" href="#">{% trans "Can't recall your password?" %}</a>
                            <a id="send-pw-cancel" style="display:none" href="#">{% trans "Return to login..." %}</a>
                        </div>
                    </div>
                </div>
                {% if not noSignup %}
                <div class="span3 row-signup">
                    <h3>{% trans "login / signup / headline" %}</h3>
                    <p>{% trans "login / signup / intro" %}</p>
                    <div class="signup-form form-vertcal">
                        <form>
                            <div class="control-group">
                                <input type="email" autocomplete="username" class="input-xlarge span2 register-email" placeholder="{% trans "email" %}" />
                            </div>
                            <div class="control-group">
                                <input autocomplete="new-password" type="password" class="input-xlarge span2 register-pwd" placeholder="{% trans "password" %}" />
                            </div>
                            <div class="control-group">
                                <input autocomplete="new-password" type="password" class="input-xlarge span2 register-pwd-2" placeholder="{% trans "repeat password" %}" />
                            </div>
                        </form>
                        <a class="btn-register btn btn-default"><i class="fa fa-fw fa-pencil"></i> {% trans "Sign Up" %}</a>
                    </div>
                </div>
                {% else %}
                <style>
                #dwLoginForm {
                    width: 420px;
                    margin-left: -210px;
                    box-shadow: 0 0 20px rgba(0,0,0, 0.3);
                    border: 0;
                    position: relative;
                }
                </style>
                {% endif %}
            </div>
            {% if has_hook('alternative_signin') %}
            <div class="alternative-signins">
               {% trans "login / alternative signin" %}
                {% for signin in alternative_signins %}
                    <a href="{{ signin.url }}">{% if signin.icon %}<i class="{{ signin.icon }}"></i>{% endif %} {{ signin.label }}</a>
                {% endfor %}
            </div>
            {% endif %}

            <div class="signup-confirm hidden">
                <div class="jumbo-text">
                    {% trans "login / signup / confirmation-email" %}

                    <div class="sub">{% trans "login / signup / confirmation-email-hint" %}</div>

                    <button class="button btn btn-got-it">{% trans "login / signup / confirm" %}</button>
                </div>
            </div>

        </div>

    </div>

        <script type="text/javascript">
        $(function() {
            //$('a').click(console.log);
            $('#forgot-password').click(function(e) {
                e.preventDefault();
                var form = $(e.target).parents('.modal');
                $('.login-pwd', form).hide();
                $('.btn-login', form).hide();
                $('label[for=keep-login]', form).hide();
                $('#forgot-password', form).hide();
                $('.btn-send-pw', form).fadeIn();
                $('#send-pw-cancel', form).fadeIn();
            });

            $('#send-pw-cancel').click(function(e) {
                e.preventDefault();
                var form = $(e.target).parents('.modal');
                $('.login-pwd', form).fadeIn();
                $('.btn-login', form).fadeIn();
                $('label[for=keep-login]', form).fadeIn();
                $('#forgot-password', form).fadeIn();
                $('.btn-send-pw', form).hide();
                $('#send-pw-cancel', form).hide();
            });

            $('.btn-send-pw').click(function(e) {
                if ($('.login-email').val().trim() == '') {
                    $('.login-email').parent().addClass('error');
                    return false;
                }
                $('.login-email').parent().removeClass('error');
                $.ajax({
                    url: '/api/account/reset-password',
                    type: 'POST',
                    contentType: 'application/json',
                    dataType: 'json',
                    data: JSON.stringify({
                        email: $('.login-email').val()
                    }),
                    success: function(res) {
                        if (res.status == 'ok') {
                            dw.backend.logMessage(res.data, $(e.target).parent());
                        } else {
                            if (res.code == 'login-email-unknown') {
                                $('.login-email').parent().addClass('error');
                            }
                            dw.backend.logError(res.message, $(e.target).parent());
                        }
                    }
                });
            });
        });
        </script>

{% endblock %}
